<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  h2 {
    text-align: center;
  }

  .diyi {
    float: left;
    width: 80px;
    height: 500px;
    margin-left: 550px;
  }

  .dier {
    float: left;
    width: 80px;
    height: 500px;
    margin-left: 40px;
  }

  .disan {
    float: left;
    width: 80px;
    height: 500px;
    margin-left: 40px;

  }

  .disi {
    float: left;
    width: 80px;
    height: 500px;
    margin-left: 40px;

  }

  .first {
    float: left;
    width: 80px;
    height: 400px;
    background-color: pink;
  }

  .two {
    float: left;
    width: 80px;
    height: 400px;
    background-color: pink;
  }

  .three {
    float: left;
    width: 80px;
    height: 400px;
    background-color: pink;
  }

  .four {
    float: left;
    width: 80px;
    height: 400px;
    background-color: pink;
  }

  p {
    display: block;
    font-weight: 700;
    text-align: center;
    font-size: 14px;
    width: 80px;
    height: 20px;
  }

  s {
    display: block;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    font-size: 14px;
    width: 80px;
    height: 20px;
  }
</style>

<body>
  <h2>管睿松</h2>
  <div class="diyi">
    <p>第一季度</p>
    <div class="first"></div>
    <s class="z">400</s>
  </div>
  <div class="dier">
    <p>第二季度</p>
    <div class="two"></div>
    <s class="x">400</s>
  </div>
  <div class="disan">
    <p>第三季度</p>
    <div class="three"></div>
    <s class="q">400</s>
  </div>
  <div class="disi">
    <p>第四季度</p>
    <div class="four"></div>
    <s class="v">400</s>
  </div>

  <script>
    let a = prompt('请输入第一季度量')
    let b = prompt('请输入第二季度量')
    let c = prompt('请输入第三季度量')
    let d = prompt('请输入第四季度量')
    const z = document.querySelector('.z')
    const x = document.querySelector('.x')
    const q = document.querySelector('.q')
    const v = document.querySelector('.v')
    const first = document.querySelector('.first')
    const two = document.querySelector('.two')
    const three = document.querySelector('.three')
    const four = document.querySelector('.four')
    first.style.height = `${a}px`
    two.style.height = `${b}px`
    three.style.height = `${c}px`
    four.style.height = `${d}px`
    z.innerHTML = `${a}`
    x.innerHTML = `${b}`
    q.innerHTML = `${c}`
    v.innerHTML = `${d}`

  </script>
</body>

</html>